<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        html,
        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var { Scene, GaodeMap } = L7;
        const scene = new Scene({
            id: 'map',
            map: new GaodeMap({
                /* dark|light|normal */
                style: 'normal', // 样式URL
                center: [120.19382669582967, 30.258134],
                pitch: 50,
                zoom: 2,
                // token: '3851594382e218c49865a4d6a5170b52',
            }),
            logoVisible: false
        });
        /*
        1、侧重地理数据的展示
        2、map是作为场景Scene的一个属性
        Scene场景  使用地图来实现地理数据的可视化
         */
        /* L7
        阿里
        高德 --阿里  国内
        国际 mapbox
         */
        // 加载geojson数据（此时的data就是一个geojson数据。）
        const data = {
            type: "FeatureCollection",
            features: [
                {
                    type: "Feature",
                    geometry: {
                        type: "Point",
                        coordinates: [
                            114.30,
                            30.50
                        ]
                    },
                    properties: {
                        name: "武汉市",
                        height: 400,
                        center: [114.30, 30.50]
                    }
                },
                {
                    type: "Feature",
                    geometry: {
                        type: "Point",
                        coordinates: [
                            118.30,
                            30.50
                        ]
                    },
                    properties: {
                        name: "上海",
                        height: 400,
                        center: [118.30, 30.50]
                    }
                }
            ]
        }
        scene.on("loaded", () => {
<<<<<<< HEAD
            // 先创建一个点图层
            var pointLayer = new L7.PointLayer();
            // 把geoojson点数据作为数据源添加给这个点图层。
=======
            var pointLayer = new L7.PointLayer({
                name: "point"
            });
>>>>>>> ad83e8f124103faed7dc0037e42861df13e56ff1
            pointLayer.source(data)
                .shape('simple')
                .size(16)
                .color('#006CFF')
            // 给这个点图层设置数据源，形状，大小，颜色
            // 将这个点图层添加到scene场景中。
            scene.addLayer(pointLayer)
            // 然后创建一个popup专用图层。new L7.LayerPopup()
            const layerPopup = new L7.LayerPopup({
                // new L7.LayerPopup()参数传一个对象，可以有items何，trigger属性
                // 属性items:传一个数组。
                // 数组的每一项 传对一个popup图层的设置，
                // 有如下属性：
                // layer，加给哪个图层
                // fields:弹窗中显示哪些字段的属性何属性值。
                // fields中的数组项，如果是对象，那就还可以设置
                // field  formatField 和 formatValue属性
                // 用来格式化 字段的key和 value
                items: [
                    {
                        layer: pointLayer,
                        /* 显示geojson中properties中的值 */
                        fields: [
                            'name',
                            'height',
                            'center'
                        ]
                    },
                ],
                trigger: 'hover',
            });
            // 将这个popuplayer集合添加到scene中。
            scene.addPopup(layerPopup);
            scene.on("click", () => {
                /* openlayer */
                /* getLayerByName  PointLayer LineLayer PolygonLayer */
                let layer = scene.getLayerByName("point");
                console.log(scene.getLayers())
            })
        })
    </script>
</body>

</html>